<script setup lang="ts">
import {reactive,ref} from "vue";
import Navigate from "@/Components/Navigate.vue";
import router from "@/Router";
import RecommendTitleSvg from "@/svg/RecommendTitleSvg.vue";
import {activeIndex, songSearch} from "@/store/songStore";
import {useRoute} from "vue-router";


const route = useRoute()
let currentIndex = ref(JSON.stringify(route.query.key) ? route.query.key : '')
const sendTab = (tabIndex) => {
  songSearch.value =''
  // sessionStorage.setItem("currentActiveIndex",tabIndex.toString())
  // activeIndex.value = tabIndex
  let key = {
    key:JSON.stringify(tabIndex)
  }
  if(tabIndex==1)
    router.push({path:"/recommend", query:key})
  if(tabIndex==2)
    router.push({path:"/music_room", query:key})
  if(tabIndex==3)
    router.push({path:"/love", query:key})
  if(tabIndex==4)
    router.push({path:"/history", query:key})
  if(tabIndex==5)
    router.push({path:"/game", query:key})
  if(tabIndex==6)
    router.push({path:"/q_a", query:key})
}

</script>

<template>
  <div class=" left-list   z-8 w-50 h-full w-70 bg-[#dff6fa]  pb-50 pt-9 border-r-5 border-cyan-1 select-none">
    <navigate class="mt--5"></navigate>
    <div class="logo flex items-center justify-center h-20 px-5 pt-6 ml--1 select-none">
      <img src="../img/logo.png" class=" w-78 ">
    </div>
    <div class="under-logo flex flex-col gap-1 mt--3 ">
      <div class="online-music flex flex-col gap-2 justify-start mt-8 ml-10 mr-8 ">
        <img src="../img/t-在线音乐.png" class=" h-5 w-34">
        <button @click="sendTab(1)"
          class="t-recommend hover:bg-#a5f3fc rounded-2xl flex gap-3 justify-start items-center"
          :class="[currentIndex == 1 ? 'active': '']"
        >
          <img src="../img/推荐.png" class="h-12">
          <RecommendTitleSvg class="w-16 h-auto ml-3"></RecommendTitleSvg>
        </button>
        <button @click="sendTab(2)"
                class="t-music-room hover:bg-#a5f3fc rounded-2xl flex gap-3 justify-start items-center  ml--2"
                :class="[currentIndex == 2 ? 'active': '']"
        >
          <img src="../img/音乐馆.png" class="h-12">
          <img src="../img/t-音乐馆.png" class="w-30 flex justify-center items-center mt--1" >
        </button>
      </div>

      <div class="my-music flex flex-col gap-2 justify-start mt-6 ml-10 mr-8">
        <img src="../img/t-我的音乐.png" class=" h-5 w-34">
        <button @click="sendTab(3)"
                class="t-mylove hover:bg-#a5f3fc rounded-2xl flex gap-3 justify-start items-center"
                :class="[currentIndex == 3 ? 'active': '']"
        >
          <img src="../img/我喜欢.png" class="h-12">
          <img src="../img/t-我喜欢.png" class="h-8 ml-3 w-35 flex justify-center items-center mt--1" >
        </button>
        <button @click="sendTab(4)"
                class="t-history rounded-2xl hover:bg-#a5f3fc flex gap-3 justify-start items-center "
                :class="[currentIndex == 4 ? 'active': '']"
        >
          <img src="../img/最近播放.png" class="h-12">
          <img src="../img/t-最近播放.png" class="h-9.5 ml-2  flex justify-center items-center mt-1.5">
        </button>
      </div>

      <div class="music-play flex flex-col gap-2 justify-start mt-6 ml-10 mr-8">
        <img src="../img/t-音乐乐园.png" class=" h-5 w-34">
        <button @click="sendTab(5)"
                class="t-history rounded-2xl hover:bg-#a5f3fc flex gap-3 justify-start items-center "
                :class="[currentIndex == 5 ? 'active': '']"
        >
          <img src="../img/游戏.png" class="h-12">
          <img src="../img/t-游戏.png" class="h-7.6 ml-2.5 mt--1">
        </button>
        <button @click="sendTab(6)"
                class="t-history rounded-2xl hover:bg-#a5f3fc  flex gap-3 justify-start items-center "
                :class="[currentIndex == 6 ? 'active': '']"
        >
          <img src="../img/音乐探索.png" class="h-12 w-13">
          <img src="../img/t-音乐探索.png" class="w-33 flex justify-center items-center mt--0.5">

        </button>

      </div>
    </div>
  </div>

</template>

<style scoped>
.active{
  @apply bg-#a5f3fc;
}
</style>